<!-- 
  居中对话框 父组件需绑定
  标题 默认标题
  宽度  默认500
  colose方法
  submit方法
  show 默认false
    -->
<style lang="scss" scoped>
.centerPop {
  :deep(.el-dialog) {
    .el-dialog__header {
      /* border-bottom: none !important; */
      border-bottom: 1px solid #ccc;
      margin: 0 -16px;
      padding: 0 16px 12px 16px;
    }
    .el-dialog__body {
      padding-top: 12px;
    }
    .el-dialog__footer {
      /* border-top: node !important; */
      border-top: none !important;
      justify-content: flex-end;
    }
  }
}
</style>

<template>
  <div class="centerPop">
    <el-dialog
      custom-class="aaa"
      v-model="prop.show"
      :title="prop.title"
      :width="prop.width"
      :before-close="handleClose"
    >
      <slot> </slot>
      <template #footer v-if="showBtn">
        <div class="footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {} from 'vue';
const prop = defineProps({
  width: {
    type: Number,
    default: 400,
  },
  show: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    default: '标题',
  },
  showBtn: {
    type: Boolean,

    default: false,
  },
});
const emit = defineEmits(['close', 'submit']);

// 定义一个响应式变量dialogVisible，初始值为false

// 定义一个关闭对话框的函数
const handleClose = () => {
  emit('update:show', false);
  emit('close');
};

// 定义一个提交表单的函数
const handleSubmit = () => {
  emit('submit');
};
</script>
